<template>
    <div class="container">
      <div class="container--item" v-for="(item, key) in secKill" :key="key">
        <div class="container--img__box">
          <img v-lazy="item.prodImage[0]" alt="#">
        </div>
        <span class="container--item__title" ref="title">{{item.prodSubTitle}}</span>
        <div class="container--item__may">
          <span class="container--item__LimitPrice">限时价 ￥{{item.killPrice}}</span>
          <span class="container--item__original">
            ￥{{item.killPrice > 100 ? +item.killPrice + 50: +item.killPrice + 5 }}
          </span>
        </div>
        <span class="container--item__surplus">库存剩余<span>{{item.remainNumber}}</span>件</span>
        <span class="container--item__schedule">
          <span class="container--copy__schedule"
                :style="{ 'width': +item.remainNumber/+item.repertory*2.2 + 'rem' }"></span>
        </span>
        <span class="container--item__btn" @click="vieBtn(key)">马上抢</span>
      </div>
    </div>
</template>

<script>
/* eslint-disable*/
export default {
  name: 'Snap',
  data() {
    return {
      secKill: null,
    };
  },
  methods: {
    vieBtn(key) {
      this.$router.push({name: 'detailPage', params: {data: this.secKill[key]}})
    }
  },
  created() {
    this.$api.secKill()
      .then(data => {
        console.log(data);
        this.secKill = data.data.data;
        console.log(this.secKill);
      })
      .catch(error => {
        console.log(error);
      })
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  width: 100vw;
  background-color: #fff;
  .container--item{
    position: relative;
    width: 100vw;
    height: (255/75) + rem;
    margin-left: .35rem;
    .container--img__box{
      display: inline-block;
      width: 2.66667rem;
      height: 100%;
      img{
        width: 100%;
        height: 99%;
        margin-top: .5%;
      }
    }
    .container--item__title{
      font-size: .36rem;
      position: absolute;
      left: 3rem;
      top: .35rem;
      font-weight: 700;
      display: inline-block;
      width: 6.3rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .container--item__may{
      position: relative;
      display: inline-block;
      top: -2rem;
      left: .35rem;
      .container--item__LimitPrice{
        font-size: .3rem;
        color: orangered;
        font-weight: 700;
      }
      .container--item__original{
        font-size: .32rem;
        color: #ccc;
        text-decoration: line-through;
        margin-left: .3rem;
      }
    }
    .container--item__surplus{
      position: absolute;
      bottom: .8rem;
      left: 3rem;
      font-size: .32rem;
      color: #ccc;
      span{
        font-size: .32rem;
        color: #ff610f;
      }
    }
    .container--item__schedule{
      position: absolute;
      left: 3rem;
      bottom: .4rem;
      display: inline-block;
      width: 2.2rem;
      height: .12rem;
      border-radius: (30/75) + rem;
      border: 1px solid #ccc;
      .container--copy__schedule{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: #f49747;
        border-radius: 0;
        border: none;
      }
    }
    .container--item__btn{
      display: inline-block;
      width: (195/75) + rem;
      height: (55/75) +rem;
      background-color: #ff760f;
      color: #fff;
      text-align: center;
      line-height: (55/75) + rem;
      border-radius: (30/75) +rem;
      font-size: .35rem;
      position: absolute;
      right: .7rem;
      bottom: .4rem;
    }
    .container--item__btn:active{
      background-color: #ff9056;
    }
  }
}
</style>
